﻿@page "/components/menu"
<PageHeader Title="Menu 导航菜单">
    用于承载网站的架构，并提供跳转的菜单列表。
</PageHeader>
<h1>顶部导航</h1>
<br />
<Example Title="单层导航" RunStyle="@Code.BgRun">
    <Description>只存在单层结构的顶部导航，点击即跳转。可在承载单一产品或单一业务线等层级结构简单的网站使用。</Description>
    <RunContent>
        <Menu>
            <ChildContent>
            <MenuItem>菜单1</MenuItem>
            <MenuItem Active>菜单2</MenuItem>
            <MenuItem Disabled>禁用菜单</MenuItem>
            </ChildContent>
            <OperationContent>
                <a><Icon Name="IconName.Search" /></a>
                <a><Icon Name="IconName.Mail" /></a>
                <a><Icon Name="IconName.User" /></a>
            </OperationContent>
        </Menu>
        <br />
        <Menu Dark>
            <ChildContent>
                <MenuItem>菜单1</MenuItem>
                <MenuItem Active>菜单2</MenuItem>
                <MenuItem Disabled>禁用菜单</MenuItem>
            </ChildContent>
            <OperationContent>
                <a><Icon Name="IconName.Search" /></a>
                <a><Icon Name="IconName.Mail" /></a>
                <a><Icon Name="IconName.User" /></a>
            </OperationContent>
        </Menu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu>
    <ChildContent>
        <MenuItem>菜单1</MenuItem>
        <MenuItem Active>菜单2</MenuItem>
        <MenuItem Disabled>禁用菜单</MenuItem>
    </ChildContent>
    <OperationContent>
        <a><Icon Name=""IconName.Search"" /></a>
        <a><Icon Name=""IconName.Mail"" /></a>
        <a><Icon Name=""IconName.User"" /></a>
    </OperationContent>
</Menu>

<Menu Dark>
    <ChildContent>
        <MenuItem>菜单1</MenuItem>
        <MenuItem Active>菜单2</MenuItem>
        <MenuItem Disabled>禁用菜单</MenuItem>
    </ChildContent>
    <OperationContent>
        <a><Icon Name=""IconName.Search"" /></a>
        <a><Icon Name=""IconName.Mail"" /></a>
        <a><Icon Name=""IconName.User"" /></a>
    </OperationContent>
</Menu>
```
")
    </CodeContent>
</Example>
<Example Title="双层导航" RunStyle="@Code.BgRun">
    <Description>
        顶部导航下拉菜单收纳2-3级页面导航，可拓展分组展示，常用于多种业务下的快速切换导航。

    </Description>
    <RunContent>
        <Menu>
            <ChildContent>
                <MenuItem>菜单1</MenuItem>
                <MenuItem Active>菜单2</MenuItem>
                <SubMenu Title="菜单3">
                    <SubMenu Title="菜单3-1">
                        <MenuItem>菜单3-1-1</MenuItem>
                        <MenuItem>菜单3-1-2</MenuItem>
                    </SubMenu>
                    <MenuItem>菜单3-2</MenuItem>
                    <MenuItem>菜单3-3</MenuItem>
                </SubMenu>
            </ChildContent>
            <OperationContent>
                <a><Icon Name="IconName.Search" /></a>
                <a><Icon Name="IconName.Mail" /></a>
                <a><Icon Name="IconName.User" /></a>
            </OperationContent>
        </Menu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu>
    <ChildContent>
        <MenuItem>菜单1</MenuItem>
        <MenuItem Active>菜单2</MenuItem>
        <SubMenu Title=""菜单3"">
            <SubMenu Title=""菜单3-1"">
                <MenuItem>菜单3-1-1</MenuItem>
                <MenuItem>菜单3-1-2</MenuItem>
            </SubMenu>
            <MenuItem>菜单3-2</MenuItem>
            <MenuItem>菜单3-3</MenuItem>
        </SubMenu>
    </ChildContent>
    <OperationContent>
        <a><Icon Name=""IconName.Search"" /></a>
        <a><Icon Name=""IconName.Mail"" /></a>
        <a><Icon Name=""IconName.User"" /></a>
    </OperationContent>
</Menu>
```
")
    </CodeContent>
</Example>

<h1>侧边导航</h1>
<small>设置 <code>Aside</code> 成为侧边菜单</small>


        
<Example Title="单层导航" RunStyle="@Code.BgRun">
    <Description>只存在单层结构的侧边导航，点击即跳转。一般与单层顶部导航相结合，作为二级页面的侧边导航。</Description>
    <RunContent>
        <Space>
            <SpaceItem>

                <Menu Aside>
                    <MenuItem>菜单1</MenuItem>
                    <MenuItem Active>菜单2</MenuItem>
                    <MenuItem Disabled>禁用菜单</MenuItem>
                    <MenuItem>个人中心</MenuItem>
                    <MenuItem>消息</MenuItem>
                </Menu>
            </SpaceItem>
            <SpaceItem>

                <Menu Aside Dark>
                    <MenuItem>菜单1</MenuItem>
                    <MenuItem Active>菜单2</MenuItem>
                    <MenuItem Disabled>禁用菜单</MenuItem>
                    <MenuItem>个人中心</MenuItem>
                    <MenuItem>消息</MenuItem>
                </Menu>
            </SpaceItem>
        </Space>
        <br />
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu Aside>
    <MenuItem>菜单1</MenuItem>
    <MenuItem Active>菜单2</MenuItem>
    <MenuItem Disabled>禁用菜单</MenuItem>
    <MenuItem>个人中心</MenuItem>
    <MenuItem>消息</MenuItem>
</Menu>

<Menu Aside Dark>
    <MenuItem>菜单1</MenuItem>
    <MenuItem Active>菜单2</MenuItem>
    <MenuItem Disabled>禁用菜单</MenuItem>
    <MenuItem>个人中心</MenuItem>
    <MenuItem>消息</MenuItem>
</Menu>
```
")
    </CodeContent>
</Example>
<Example Title="双层导航" RunStyle="@Code.BgRun">
    <Description>
        顶部导航下拉菜单收纳2-3级页面导航，可拓展分组展示，常用于多种业务下的快速切换导航。

    </Description>
    <RunContent>
        <Space>
            <SpaceItem>
                <Menu Aside>
                    <MenuItem>菜单1</MenuItem>
                    <MenuItem Active>菜单2</MenuItem>
                    <SubMenu Title="菜单3">
                        <MenuItem>菜单3-2</MenuItem>
                        <MenuItem>菜单3-3</MenuItem>
                    </SubMenu>
                </Menu>
            </SpaceItem>
            <SpaceItem>
                <Menu Aside Dark>
                    <MenuItem>菜单1</MenuItem>
                    <MenuItem Active>菜单2</MenuItem>
                    <SubMenu Title="菜单3">
                        <MenuItem>菜单3-2</MenuItem>
                        <MenuItem>菜单3-3</MenuItem>
                    </SubMenu>
                </Menu>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu Aside>
    <MenuItem>菜单1</MenuItem>
    <MenuItem Active>菜单2</MenuItem>
    <SubMenu Title=""菜单3"">
        <MenuItem>菜单3-2</MenuItem>
        <MenuItem>菜单3-3</MenuItem>
    </SubMenu>
</Menu>


<Menu Aside Dark>
    <MenuItem>菜单1</MenuItem>
    <MenuItem Active>菜单2</MenuItem>
    <SubMenu Title=""菜单3"">
        <MenuItem>菜单3-2</MenuItem>
        <MenuItem>菜单3-3</MenuItem>
    </SubMenu>
</Menu>
```
")
    </CodeContent>
</Example>

<Example Title="可分组的侧边导航" RunStyle="@Code.BgRun">
    <Description>针对大量页面进行分组展示，以方便用户理解及查找。一般在大量业务或者页面需要展示的网站使用。</Description>
    <RunContent>
        <Menu Aside>
            <MenuItemGroup Title="分组1">
                <MenuItem>菜单1</MenuItem>
            </MenuItemGroup>
            <MenuItemGroup Title="分组菜单2">
                <MenuItem>菜单2</MenuItem>
                <MenuItem Active>菜单3</MenuItem>
                <MenuItem>菜单4</MenuItem>
            </MenuItemGroup>
        </Menu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu Aside>
    <MenuItemGroup Title=""分组1"">
        <MenuItem>菜单1</MenuItem>
    </MenuItemGroup>
    <MenuItemGroup Title=""分组菜单2"">
        <MenuItem>菜单2</MenuItem>
        <MenuItem Active>菜单3</MenuItem>
        <MenuItem>菜单4</MenuItem>
    </MenuItemGroup>
</Menu>
```
")
    </CodeContent>
</Example>

<Example Title="可收起的侧边导航" RunStyle="@Code.BgRun">
    <Description>
        在侧边导航上提供收起按钮，点击后可以将侧边栏最小化，常见于带有图标的侧边导航。
    </Description>
    <RunContent>
        <Space>
            <SpaceItem>
                <Menu Aside Collapse>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                    <MenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</MenuItem>
                    <MenuItem IconPrefix="IconName.User">用户中心</MenuItem>
                    <MenuItem IconPrefix="IconName.Mail">消息中心</MenuItem>
                    </ChildContent>
                </Menu>
            </SpaceItem>
            <SpaceItem>
                <Menu Aside Dark Collapse>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                        <MenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</MenuItem>
                        <MenuItem IconPrefix="IconName.User">用户中心</MenuItem>
                        <MenuItem IconPrefix="IconName.Mail">消息中心</MenuItem>
                    </ChildContent>
                </Menu>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu Aside Collapse>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <MenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</MenuItem>
        <MenuItem IconPrefix=""IconName.User"">用户中心</MenuItem>
        <MenuItem IconPrefix=""IconName.Mail"">消息中心</MenuItem>
    </ChildContent>
</Menu>

<Menu Aside Dark Collapse>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <MenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</MenuItem>
        <MenuItem IconPrefix=""IconName.User"">用户中心</MenuItem>
        <MenuItem IconPrefix=""IconName.Mail"">消息中心</MenuItem>
    </ChildContent>
</Menu>
```
")
    </CodeContent>
</Example>

<Example Title="可设置宽度的侧边导航" RunStyle="@Code.BgRun">
    <Description>
        通过 <code>Width</code> 设置侧边导航的宽度。
    </Description>
    <RunContent>
        <Space>
            <SpaceItem>
                <Menu Aside>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                    <MenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</MenuItem>
                    <MenuItem IconPrefix="IconName.User">用户中心</MenuItem>
                    <MenuItem IconPrefix="IconName.Mail">消息中心</MenuItem>
                    </ChildContent>
                </Menu>
            </SpaceItem>
            <SpaceItem>
                <Menu Aside Width="150">
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                        <MenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</MenuItem>
                        <MenuItem IconPrefix="IconName.User">用户中心</MenuItem>
                        <MenuItem IconPrefix="IconName.Mail">消息中心</MenuItem>
                    </ChildContent>
                </Menu>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Menu Aside>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <MenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</MenuItem>
        <MenuItem IconPrefix=""IconName.User"">用户中心</MenuItem>
        <MenuItem IconPrefix=""IconName.Mail"">消息中心</MenuItem>
    </ChildContent>
</Menu>

<Menu Aside Width=""150"">
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <MenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</MenuItem>
        <MenuItem IconPrefix=""IconName.User"">用户中心</MenuItem>
        <MenuItem IconPrefix=""IconName.Mail"">消息中心</MenuItem>
    </ChildContent>
</Menu>
```
")
    </CodeContent>
</Example>